<!-- 切换模型 -->
<script setup lang="ts">
import type { GetSessionListVO } from '@/api/model/types';
import { useRoute } from 'vue-router';
import { useChatStore } from '@/stores/modules/chat';
import { useModelStore } from '@/stores/modules/model';
import { useSystemStore } from '@/stores/modules/system';

const modelStore = useModelStore();
const chatStore = useChatStore();
const systemStore = useSystemStore();
const route = useRoute();

// 注意：模型列表的加载和默认模型的设置已经在系统初始化时完成
// 这里只需要检查模型列表是否已经加载，如果没有则加载一次

onMounted(async () => {
  // 只有当模型列表为空时才请求模型列表，避免重复请求
  if (modelStore.modelList.length === 0) {
    await modelStore.requestModelList();

    // 设置默认模型
    if (modelStore.modelList.length > 0) {
      // 检查是否有默认模型需要选中
      if (systemStore.defaultModelId) {
        const defaultModel = modelStore.modelList.find(
          model => model.id === Number(systemStore.defaultModelId),
        );

        if (defaultModel) {
          modelStore.setCurrentModelInfo(defaultModel);

          return;
        }
      }

      // 如果没有默认模型或默认模型未找到，则选中第一个模型
      if (!modelStore.currentModelInfo || !modelStore.currentModelInfo.modelName) {
        modelStore.setCurrentModelInfo(modelStore.modelList[0]);
      }
    }
  }
});

const currentModelName = computed(
  () => {
    const name = modelStore.currentModelInfo && modelStore.currentModelInfo.modelName;

    return name;
  },
);
const modelList = computed(() => modelStore.modelList);

// 判断是否为新会话
// 新会话的条件：
// 1. 路由参数 id 为 'not_login'
// 2. 路由参数 id 为 undefined 或 null（默认页面）
// 3. 当前会话没有聊天记录
const isNewSession = computed(() => {
  const sessionId = route.params?.id;
  // 默认聊天页面或未登录页面视为新会话
  if (!sessionId || sessionId === 'not_login') {
    return true;
  }

  // 检查当前会话是否有聊天记录
  const chatList = chatStore.chatMap[`${sessionId}`];
  return !chatList || chatList.length === 0;
});

// 添加一个计算属性，用于判断是否应该显示模型选择列表
// 需要同时满足两个条件：isNewSession为true，且modelSelect为true
const shouldShowModelSelect = computed(() => {
  return isNewSession.value && modelStore.modelSelect;
});

// 点击模型项
async function handleModelSelect(item: GetSessionListVO) {
  modelStore.setCurrentModelInfo(item);

  // 设置cookie，名称为cookie_pre + "model_id"（不加下划线），值为当前模型的ID
  if (systemStore.cookiePre) {
    document.cookie = `${systemStore.cookiePre}model_id=${item.id}; path=/`;
  }

  // 延迟导入 sessionStore 以避免循环依赖
  const { getSessionStore } = await import('@/utils/storeHelper');
  const sessionStore = await getSessionStore();

  // 先清空会话列表，再加载新的会话数据
  sessionStore.sessionList = [];
  await sessionStore.requestSessionList(1, true);
}
</script>

<template>
  <div class="model-select">
    <!-- 只有在新会话中且modelSelect为true时才显示模型选择 -->
    <div v-if="shouldShowModelSelect" class="model-grid">
      <el-tooltip
        v-for="item in modelList"
        :key="item.id"
        :content="item.remark"
        placement="top"
        :disabled="!item.remark"
      >
        <div
          class="model-item flex items-center gap-4px p-8px rounded-8px cursor-pointer font-size-12px border-1px border-[rgba(0,0,0,0.08)] border-solid hover:bg-[rgba(0,0,0,.04)]"
          :class="{ 'bg-blue-50 border-blue-200 is-select': item.modelName === currentModelName }"
          @click="handleModelSelect(item)"
        >
          <div
            class="model-item-content text-overflow line-height-16px"
            :class="{ 'font-weight-700 color-blue-500': item.modelName === currentModelName }"
          >
            {{ item.modelName }}
          </div>
        </div>
      </el-tooltip>
    </div>
  </div>
</template>

<style scoped lang="scss">
.model-grid {
  display: flex;
  flex-direction: row;
  gap: 4px;
  overflow-x: auto;
  padding: 4px;

  // 隐藏滚动条但保留滚动功能
  &::-webkit-scrollbar {
    display: none;
  }

  // 让子元素根据内容自适应宽度
  .model-item {
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
  }
}
</style>
